---
import logo from '~/assets/astro-logo.svg?raw';
import docs from '~/assets/docs.svg?raw';
import type { Props } from '@astrojs/starlight/props';

const main = 'https://astro.build/';
const self = '/' + (Astro.props.locale || 'en') + '/getting-started/';
---

<span class="site-title sl-flex">
	<a class="astro-logo" href={main} set:html={logo} aria-label="Astro" />
	<a class="docs-logo" href={self} set:html={docs} aria-label="Docs" />
</span>

<style>
	.site-title {
		gap: 1rem;
	}
	.site-title a {
		display: flex;
	}
	.astro-logo {
		color: var(--sl-color-white);
	}
	.docs-logo {
		color: var(--sl-color-text-accent);
	}

	/* On focus, outline <img> and <svg> rather than <a> */
	.site-title a:focus-visible {
		outline: 0;
	}
	.site-title a:focus-visible > :global(*) {
		outline: auto;
		outline-offset: 0.33rem;
		border-radius: 1px;
	}
	/* Adjust svg sizes to full nav height */
	.site-title :global(svg) {
		--display-height: 1.75rem;
		/* `auto` ensures the `<svg>` scales down on really narrow viewports */
		width: auto;
		height: auto;
		margin-block: calc((var(--sl-nav-height) - var(--display-height)) / 2);
		transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
	}
	.site-title a:hover :global(svg) {
		--hover-offset: 0.15rem;
		transform: translateY(calc(var(--hover-offset) * -1));
	}
</style>
